<template>
  <div>
    <div id="pieChart" style="height: 420px" />
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  props: {
    chartData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      formData: {},
      rules: {},
    };
  },
  computed: {},
  watch: {
    chartData: {
      initData(newval, oldval) {
        if (newval) {
          this.showchart(); //渲染echarts的函数
        }
        return newval;
      },
    },
  },

  mounted() {
    this.showchart();
  },
  methods: {
    showchart() {

      var barlist=[
        { name:"已释放",value:this.chartData.userMoney.maxmoney},
        { name:"未释放",value:this.chartData.userMoney.shengmoney},

        //  按照格式 name为x轴名称，value为对应的数据
      ]
      var chartDom = document.getElementById("pieChart");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: "总贡献值",
          // subtext: "小标题",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        // legend: {
        //   orient: "vertical",
        //   left: "left",
        // },
        grid: {
          x:120,
          y: 245,
          x2: 0,
          y2: 0,
          borderWidth: 0.1,
        },
        series: [
          {
            // name: "悬浮文本",
            type: "pie",
            radius: "50%",
            data: barlist,
            label: {
              normal: {
                show: true,
                formatter: '{b}:{c}' + '\n\r' + '({d}%)'
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>
<style>
</style>
